<template>
  <div id="home">
    <el-container class="home-box">
			<el-header>
				<div class="left">
					<img src="../assets/logo.png" alt="">
					<div>后台管理系统</div>
				</div>
				<div class="right">
					<el-button type="info" size="small" @click="signOut">退出</el-button>
				</div>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu
						:default-active="defaultActive"
						class="el-menu-vertical-demo"
						background-color="#545c64"
						text-color="#fff"
						:unique-opened="true"
						:router="true"
						active-text-color="#ffd04b">
						<el-submenu :index="item.path" v-for="item in menus" :key="item.id">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>{{item.authName}}</span>
							</template>
							<el-menu-item @click="selectFn(item2.path)" :index="item2.path" v-for="item2 in item.children" :key="item2.id"><i class="el-icon-menu"></i>{{item2.authName}}</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<div class="main-box">
						<transition name="slide-fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</div>
					
				</el-main>
			</el-container>
    </el-container>
  </div>
</template>

<script>
export default {
	data() {
		return {
			menus: [],
			defaultActive: ''
		}
	},
	created() {
		this.getMenus()
		this.defaultActive = sessionStorage.getItem('defaultActive') || ''
	},
	methods: {
		signOut() {
			this.$message({
				type: 'success',
				message: '退出成功'
			})
			sessionStorage.removeItem('token')
			sessionStorage.removeItem('defaultActive')
			this.$router.push('/login')
		},
		async getMenus() {
			const {data} = await this.$http({
				type: 'get',
				url: '/menus'
			})

			if(data.meta.status !== 200 ) {
				return this.$message({
					type: 'error',
					message: data.meta.msg
				})
			}

			this.menus = data.data
		},
		selectFn(path) {
			sessionStorage.setItem('defaultActive', path)
			this.defaultActive = path
		}
	}
}
</script>

<style lang="less" scoped>
#home {
	height: 100%;
	.slide-fade-enter-active {
		transition: all .3s ease;
	}
	.slide-fade-leave-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter {
		transform: translateX(80px);
		opacity: 0;
	}
	.slide-fade-leave-to{
		transform: translateX(-50px);
		opacity: 0;
	}
	.home-box{
		height: 100%;
	}
	.el-menu{
		border-right: solid 1px #545c64;
	}
	.el-main{
		background-color: #eff2f7;
		.main-box{
			background-color: #fff;
			min-height: 100%;
			overflow: hidden;
		}
	}
	.el-header {
		color: #fff;
		background-color: #545C59;
	}
	.el-aside {
		background-color: #545c64;
	}

	.el-header {
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		color: #fff;
		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 20px;
			img {
				width: 15%;
				margin-right: 10px;
			}
		}
		.right{
			display: flex;
			align-items: center;
		}
		
	}
}
</style>